<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="shortcut icon" href="./imgs/001.ico">
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <link rel="stylesheet" href="./css/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
  <el-container>
    <!-- 1.左主体 -->
    <my-aside></my-aside>
    <!-- 2.右边栏 -->
    <el-main>
      <!-- 2.1右头边栏 -->
      <my-header></my-header>
      <!-- 2.2右主体 -->
      <el-footer>
        <!-- 2.2右主体视频 -->
        <div style="display: flex;">
          <div id="left1" style="width: 100%;
                    transition: width 0.5s;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;">
            <button style="z-index: 3;
                    position: absolute;
                    width: 100px;
                    line-height: 2rem;
                    top: 50%;
                    right: 20px;">信息
            </button>
            <div id="video1" style="width: 100%;height: 600px" class="active">
              <video style="width: 100%;height: 600px" src="../static/videos/004.mp4" controls autoplay></video>
            </div>

          </div>
          <div id="right1" style="width: 0;
                    height: 600px;
                    background-color: #87878e;
                    transition: width 0.5s;
                    backdrop-filter: blur(0); /* 初始设置背景无模糊效果 */
                    opacity: 0.3; /* 设置初始透明度 */"></div>
        </div>
      </el-footer>
    </el-main>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/aside.js"></script>
<script src="js/header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {}
    })
    var button = document.querySelector("#left1>button");
    var leftElement = document.getElementById("left1");
    var rightElement = document.getElementById("right1");

    var isExpanded = false; // 初始状态为未展开

    button.addEventListener("click", function () {
        if (isExpanded) {
            // 如果未展开，则变为全展开状态
            leftElement.style.width = "100%";
            rightElement.style.width = "0%";
            rightElement.style.backdropFilter = "blur(0)"; // 移除背景模糊效果
        } else {
            // 如果已展开，则还原到初始状态
            leftElement.style.width = "70%";
            rightElement.style.width = "30%";
            rightElement.style.backdropFilter = "blur(5px)"; // 添加背景模糊效果
        }

        isExpanded = !isExpanded; // 切换状态
    });

    var video = document.querySelector("video");

    video.addEventListener("webkitfullscreenchange", function () {
        if (document.webkitFullscreenElement === null) {
            // 退出全屏后恢复模糊效果
            if (isExpanded) {
                rightElement.style.backdropFilter = "blur(5px)";
            }
        }
    });

    // 监听鼠标滚动事件
    document.addEventListener("wheel", function (event) {
        var delta = Math.sign(event.deltaY); // 获取鼠标滚动方向，1为向下滚动，-1为向上滚动

        var currentVideo = document.querySelector(".active"); // 获取当前活动的视频元素
        var currentVideoId = currentVideo.id; // 获取当前活动视频元素的ID

        var nextVideoId;
        if (delta > 0) {
            // 向下滚动，切换到下一个视频
            nextVideoId = parseInt(currentVideoId.substr(5)) + 1;
        } else {
            // 向上滚动，切换到上一个视频
            nextVideoId = parseInt(currentVideoId.substr(5)) - 1;
        }

        var nextVideo = document.getElementById("video" + nextVideoId); // 获取下一个要切换的视频元素
        if (nextVideo) {
            currentVideo.classList.remove("active"); // 移除当前视频的活动状态
            nextVideo.classList.add("active"); // 添加下一个视频的活动状态

            // 添加过渡效果
            currentVideo.style.opacity = 0; // 将当前视频的透明度设置为0
            currentVideo.style.pointerEvents = "none"; // 禁用当前视频的交互事件
            nextVideo.style.opacity = 1; // 将下一个视频的透明度设置为1
            nextVideo.style.pointerEvents = "auto"; // 启用下一个视频的交互事件

            // 播放下一个视频
            nextVideo.querySelector("video").play();
        }
    });
</script>
</html>